<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏</title>
		<style>
			*{
				font: 16px "微软雅黑";
				/* 去掉无序列表样式 针对一项列表项标记 */
				list-style-type: none;
				/* 去掉无序列表样式  针对三项 ①列表项标记 list-style-type、
				                            ②列表项位置 list-style-position
											③列表项图片 list-style-image
									所有的效果，去掉样式
				 */
				list-style: none;
				/* 去掉内外边距：ul li存在外边距 */
				margin: 0;
				padding: 0;
			}
			aside{
				width: 235px;
				height: 460px;
				background: #55ff00;
				/* 盒子模型：外边距 */
				margin: 20px 200px;
			}
			aside ul.ul_sidebar li{
				width: 235px;
				height: 46px;
				text-align: center;
				line-height: 46px;
				/* 挂靠位【固定】 使用相对定位 */
				position: relative;
			}
			aside ul.ul_sidebar li:hover{
				background: #999999;
			}
			/* 挂靠点【活动】 使用绝对定位。按照父级位置定位*/
			aside ul.ul_sidebar div.out{
				width: 400px;
				height: 460px;
				border: 1px solid red;
				/* 绝对定位 */
				position: absolute;
				left: 435px;
				/* 默认隐藏 搞不定【jQuery】*/
				display: none;
			}
			
			
			 
			
			
			
			div.sidebar{
				width: 235px;
				height: 460px;
				background: #d3d3d3;
			}
			div.sidebar ul.ul_sidebar li{
				width: 235px;
				height: 46px;
				font-size: 16px;
				font-family: 微软雅黑;
				line-height: 46px;
				text-align: center;
			}
			div.sidebar ul.ul_sidebar li:hover{
				background: #999999;
			}
		</style>
	</head>
	<body>
		<!-- html结构：外层div.sidebar
		    html结构标记：aside元素语义化元素，表示：左栏、侧边栏、广告
			             有利于SEO优化
			             通常代替div+id/class
                       内层ul.ul_sidebar li*10
					   内容参照京东左栏第一个
			css结构：内部引入方式
			        通配选择器--合理添加
					外层div.sidebar宽235px，高460px，上背景颜色自定
					内层每个li加宽高235*46
					内层文本垂直居中对齐，文字大小16px家族自定
					鼠标移动上去li，背景颜色改变有一个色值
			-->
			<aside>
				<ul class="ul_sidebar">
					<!-- 弹出框，模式div+别名 -->
					<div class="out"></div>
					<li>家用电器</li>
					<li>手机 / 运营商 / 数码</li>
					<li>电脑 / 办公 / 文具用品</li>
					<li>家居 / 家具 / 家装 / 厨具</li>
					<li>男装 / 女装 / 童装 / 内衣</li>
					<li>美妆 / 个护清洁 / 宠物</li>
					<li>女鞋 / 箱包 / 钟表 / 珠宝</li>
					<li>男鞋 / 运动 / 户外</li>
					<li>房产 / 汽车 / 汽车用品</li>
					<li>母婴 / 玩具乐器</li>
				</ul>
			</aside>
			
			
		<div class="sidebar">
			<ul class="ul_sidebar">
				<li> 家用电器</li>
				<li> 手机 / 运营商 / 数码</li>
				<li> 电脑 / 办公 / 文具用品</li>
				<li> 家居 / 家具 / 家装 / 厨具</li>
				<li> 男装 / 女装 / 童装 / 内衣</li>
				<li> 美妆 / 个护清洁 / 宠物</li>
				<li>女鞋 / 箱包 / 钟表 / 珠宝</li>
				<li>男鞋 / 运动 / 户外</li>
				<li> 房产 / 汽车 / 汽车用品</li>
				<li> 母婴 / 玩具乐器</li>
			</ul>
		</div>
	</body>
</html>